@import '../../styles/variables.scss';

.dynamic-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  border-radius: 40rpx;
  background: $white;
  border: $border-width solid $border-color;
  padding: 34rpx 36rpx;
  gap: 26rpx;
  margin-top: 30rpx;
  
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
  }
  
  &-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  &-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 100%;
    border: 2.8rpx solid $text-color;
    overflow: hidden;
    
    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
  
  &-user-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 18rpx;
  }
  
  &-username {
    font-size: 28rpx;
    font-weight: 400;
    color: $text-color;
  }
  
  &-user-meta {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }
  
  &-time {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }
  
  &-content {
    font-size: 24rpx;
    font-weight: 400;
    color: $text-color;
    
    text {
      display: block;
    }
  }
  
  &-images {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14rpx;
  }
  
  &-image-item {
    height: 192rpx;
    width: 192rpx;
    border-radius: 4px;
    
    image {
      width: 192rpx;
      height: 192rpx;
    }
  }
}